<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点我</button>

    <input type="text" v-model="msg">
    <p v-text="msg"></p>

    <div v-text="msg"></div>
    <div v-text="age"></div>
    <h3 v-text="name"></h3>
    
    <script>
        
        // 需求：有一个对象，当对象里的属性发生改变，我想侦听到
        const data = {
            msg: '',
            age: 16
        }

        //遍历后转成Object.defineProperty的形式
        for(const key in data) {
            // 可以给对象加属性，并且这样子加的属性，能被侦听到
            Object.defineProperty(data, key, {
            set (val) {
                // 找到所有用到msg的地方
                const list = document.querySelectorAll(`[v-text=${key}]`)
                list.forEach(v => {
                    v.innerText = val
                })
            },
            get () {
                console.log('取值')
                return 'jack'
            }
            })
        }
        data.msg = '你好'
        data.age = '你坏'
        data.name = 'xxxx' // 不会触发界面更新

        

        // console.log(data.name) // 取值
        // data.xxx = 'aaa'


        document.querySelector('[v-model=msg]').addEventListener('input', function () {

            data.msg = this.value
        })
        
        /*

        const data = { msg: '123' }

        const px = new Proxy(data, {
            get (target, prop) {
                return target[prop]
            },
            // 参数1：target：就是data这个对象,也就是实例化Proxy时传入的对象
            // 参数2：prop：要赋值的属性名
            // 参数3：val：要赋的属性值
            set (target, prop, val) {
                // console.log('赋值了', target, prop, val)

                // 数据变了更新到页面
                const list = document.querySelectorAll(`[v-text=${prop}]`)
                if (list) {
                    list.forEach(v => v.innerText = val)
                }
                target[prop] = val
            }
        })

        px.msg = '你好好好'

        // 对Porxy对象进行赋值就触发了set方法
        // 此时你操作px，就相当于在操作data
        // px.msg = '你好'
        // console.log(px.msg) //取值，触发get

       
        document.querySelector('#btn').addEventListener('click', function () {
            // 数据响应式 --- 数据发生改变，界面跟着变
            // vue3没有$set，因为vue3用的原理是proxy，即使是动态添加的新属性，也能被侦听到
            px.name = '你好，你好你好好'
        })
        */
    </script>
</body>
</html>